<template>
    <div class="wrap">
        <div class="con">
            <BlogItem v-for="(item,i) in list" :key="item.id" 
                :title="item.title"
                :timer="item.timer"
                :username="item.username"
                :id="item.id"
                :con="item.con"
            ></BlogItem>
        </div>
        <button class="btn" @click="$router.push('/add')">发表博客</button>
    </div>
</template>


<script>
import BlogItem from '../components/blog-item.vue';
export default {
    components:{
        BlogItem
    },
    created(){
        console.log(this.list);
        this.getData();
    },
    data(){
        return {
            list:[]  //博客的列表
        }
    },
    methods:{
        getData(){
            this.$http.get('/api/blog').then(res => {
                console.log(res);
                if(res.data.code === 1){
                    this.list = res.data.data;
                }
            })
        }
    }
}
</script>

<style scoped>
    .wrap{
        width:100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .con{
        width:100%;
        flex:1;
        overflow: auto;
    }

    .btn{
        width:100%;
        height: 44px;
        background: blue;
    }
</style>